import React, { useEffect, useMemo, useState } from "react";
import { IMatchItem } from "../../../../interface/Match.ts";
import style from "./MatchItem.module.scss";
interface MatchProps {
  matchItem: IMatchItem;
  selected: boolean;
  onClick: () => void;
}
const MatchItem: React.FC<MatchProps> = (props: MatchProps) => {
  const [match, setMatch] = useState({} as IMatchItem);

  useEffect(() => {
    setMatch(props.matchItem);
  }, [props]);
  const itemStyle = useMemo(() => {
    if (props.selected) {
      if (props.matchItem.isWin) {
        return `${style.MatchItem} ${style.winbox}`;
      } else {
        return `${style.MatchItem} ${style.losebox}`;
      }
    } else {
      return `${style.MatchItem} ${style.ml}`;
    }
  }, [match.gameId, props.selected, props.matchItem.isWin]);

  const winStyle = useMemo(() => {
    // if (props.gameId === match.gameId) {
    if (props.matchItem.isWin) {
      return `${style.winLose}  ${style.win}`;
    } else {
      return `${style.winLose}  ${style.lose}`;
    }
    // }
  }, [props.matchItem.isWin]);

  return (
    <div className={itemStyle} onClick={props.onClick}>
      <div>
        <img alt="" src={match.championId} />
      </div>
      <div className={style.matchInfo}>
        <div>
          <p className={style.gameModel}>{match.gameModel}</p>
          <p className={style.matchTime}>{match.matchTime}</p>
        </div>
        <div className={winStyle}>{match.isWin ? "胜利" : "失败"}</div>
      </div>
    </div>
  );
};

export default MatchItem;
